<template>
  <div class="main" ref="table_main">
    <!-- <Crumbs :breadcrumb="$router.currentRoute.value.matched"></Crumbs> -->
    <div class="wrap">
      <div class="header">
        <div class="header-search">
          <a-form class="form">
            <a-row :gutter="24" type="flex">
              <a-col
                v-for="(i, index) in colGroup"
                :key="index"
                :xxl="i.xxl"
                :xl="i.xl"
                :style="{ display: index < count ? 'block' : 'none' }"
              >
                <a-form-item :label="i.label" v-if="i.type == 'input'">
                  <a-input
                    v-model:value="formData[i.key]"
                    :placeholder="i.placeholder"
                  />
                </a-form-item>
                <a-form-item :label="i.label" v-else-if="i.type == 'select'">
                  <a-select
                    :placeholder="i.placeholder"
                    allowClear
                    v-model:value="formData[i.key]"
                  >
                    <a-select-option
                      v-for="item in i.provinceData"
                      :key="item.value"
                    >
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item :label="i.label" v-else-if="i.type == 'time'">
                  <a-date-picker
                    v-model:value="formData[i.key]"
                    :placeholder="i.placeholder"
                    style="width: 100%"
                  />
                </a-form-item>
                <a-form-item :label="i.label" v-else-if="i.type == 'timeTwo'">
                  <a-range-picker
                    v-model:value="formData[i.key]"
                    :placeholder="i.placeholder"
                  />
                </a-form-item>
                <a-form-item :label="i.label" v-else-if="i.type == 'inputTwo'">
                  <a-input-group>
                    <a-row :gutter="8">
                      <a-col :span="11">
                        <a-input
                          v-model:value="formData[i.key[0]]"
                          :placeholder="i.placeholder[0]"
                        />
                      </a-col>
                      <a-col :span="2" class="form-mid"> - </a-col>
                      <a-col :span="11">
                        <a-input
                          v-model:value="formData[i.key[1]]"
                          :placeholder="i.placeholder[1]"
                        />
                      </a-col>
                    </a-row>
                  </a-input-group>
                </a-form-item>
              </a-col>

              <a-col :xxl="btnSpan.xxl" :xl="btnSpan.xl" :push="colPush">
                <div class="btn-box">
                  <button
                    type="button"
                    class="btn-transparent"
                    @click="searchMore"
                  >
                    <span>{{ expand ? "收起" : "展开" }}</span>
                    <i
                      :class="[
                        'iconfont',
                        expand ? 'icon-shang' : 'icon-xiala',
                      ]"
                    ></i>
                  </button>
                  <button type="button" class="btn-white" @click="handleReset">
                    重置
                  </button>
                  <button type="button" class="btn-blue" @click="handleQuery">
                    查询
                  </button>
                  <button type="button" class="btn-orange" @click="handleNew">
                    新增
                  </button>
                </div>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </div>
      <div class="content">
        <div class="content-main">
          <div class="table-operations">
            <div class="left">
              <div>
                <span>已选择：</span>
                <span class="font-num">{{ selectedRowKeys.length }}条</span>
              </div>
              <div class="total-num">
                <span>共计：</span>
                <span>{{ countAll }}</span>
                <span>条数据</span>
              </div>
            </div>
            <div class="right">
              <a-button class="btn" @click="handleBatchDel">
                <i class="iconfont icon-piliangshanchu"></i>批量删除
              </a-button>
            </div>
          </div>
          <div class="table-main">
            <a-table
              style="height: 100%"
              rowKey="key"
              :loading="loading"
              :columns="columns"
              :data-source="tableData"
              :pagination="false"
              :scroll="tableScroll"
              :row-selection="{
                selectedRowKeys: selectedRowKeys,
                onChange: onSelectChange,
              }"
              :rowClassName="
                (index) => (index % 2 === 1 ? 'table-striped' : null)
              "
              bordered
            >
              <!-- 操作按钮 -->
              <template #bodyCell="{ column, record, index }">
                <template v-if="column.dataIndex == 'indexbox'">
                  <p class="table-row-btn">
                    {{ index + 1 }}
                  </p>
                </template>
                <template v-if="column.dataIndex == 'status'">
                  <p v-if="record.status == 0" class="status-box">
                    <span class="ststus-green"></span>
                    成功
                  </p>
                  <p v-if="record.status == 1" class="status-box">
                    <span class="ststus-red"></span>
                    危险
                  </p>
                  <p v-if="record.status == 2" class="status-box">
                    <span class="ststus-orange"></span>
                    警告
                  </p>
                  <p v-if="record.status == 3" class="status-box">
                    <span class="ststus-grey"></span>
                    失败
                  </p>
                  <p v-if="record.status == 4" class="status-box">
                    <span class="ststus-blue"></span>
                    正常
                  </p>
                </template>
                <template v-if="column.dataIndex === 'operation'">
                  <p class="table-row-btn">
                    <!-- <a class="a-btn-blue" @click="handleDel(record)">删除</a> -->
                    <a class="a-btn-blue" @click="see">查看</a>
                    <a class="a-btn-blue" @click="handleNew1">编辑</a>
                    <a-dropdown class="table-dropdowm" placement="bottomRight">
                      <a class="a-btn-blue"
                        >更多<i class="iconfont icon-xia"></i
                      ></a>
                      <template #overlay>
                        <a-menu>
                          <a-menu-item>
                            <a class="a-btn-blue" @click="detailBtn">详情</a>
                          </a-menu-item>
                          <a-menu-item>
                            <a class="a-btn-blue" @click="play">播放</a>
                          </a-menu-item>
                          <a-menu-item>
                            <a class="a-btn-blue" @click="handleDel(record)"
                              >删除</a
                            >
                          </a-menu-item>
                        </a-menu>
                      </template>
                    </a-dropdown>
                  </p>
                </template>

                <template v-if="column.dataIndex == 'type'">
                  <div v-if="record.type == 1" class="type-box">
                    <div class="type-item type-green">
                      <i class="iconfont icon-shigongzhong"></i>
                      <span>绿色</span>
                    </div>
                  </div>
                  <div v-if="record.type == 2" class="type-box">
                    <div class="type-item type-red">
                      <i class="iconfont icon-shigongzhong"></i>
                      <span>红色</span>
                    </div>
                  </div>
                  <div v-if="record.type == 3" class="type-box">
                    <div class="type-item type-yellow">
                      <i class="iconfont icon-shigongzhong"></i>
                      <span>黄色</span>
                    </div>
                  </div>
                  <div v-if="record.type == 4" class="type-box">
                    <div class="type-item type-gray">
                      <i class="iconfont icon-shigongzhong"></i>
                      <span>灰色</span>
                    </div>
                  </div>
                  <div v-if="record.type == 5" class="type-box">
                    <div class="type-item type-blue">
                      <i class="iconfont icon-shigongzhong"></i>
                      <span>蓝色</span>
                    </div>
                  </div>
                </template>
                <template v-if="column.key == 'status'">
                  <div v-if="record.status == 1" class="status-box">
                    <a-popover>
                      <template #content>
                        <span style="color: #fff"> 查看详情</span>
                      </template>
                      <div><span class="green-round"></span>在线</div>
                    </a-popover>
                  </div>
                  <div v-else class="rowspan-box">
                    <a-popover>
                      <template #content>
                        <span style="color: #fff"> 查看详情</span>
                      </template>
                      <div><span class="grey-round"></span>离线</div>
                    </a-popover>
                  </div>
                </template>
              </template>
            </a-table>
          </div>
          <div class="table-pager">
            <a-pagination
              show-quick-jumper
              show-size-changer
              :total="pagination.total"
              :current="pagination.current"
              :show-total="pagination.showTotal"
              @change="pageChange"
            />
          </div>
        </div>
      </div>
    </div>

    <div class="layer" v-if="active_add">
      <addpage @back="back"></addpage>
    </div>
    <div class="layer" v-if="active_edit">
      <addpage @back="back" :edit="edit"></addpage>
    </div>
    <div class="layer" v-if="active_detail">
      <!-- <detail-page @back="back"></detail-page> -->
      <detail @back="back"></detail>
    </div>
  </div>
  detailpage
</template>

<script setup lang="ts">
import { ref, computed, reactive, onMounted, watch, nextTick } from "vue";
import { message, Modal } from "ant-design-vue";
import addpage from "../addNorm/components/addNorm.vue";
// import detailPage from "../detail/index.vue";
import detail from "../detail/index.vue";
import { getTableScroll } from "utils/calcTable.js";
// import Crumbs from "components/crumbs/index.vue";
const formHeader = ref();
const active_add = ref(false);
const active_add2 = ref(false);
const active_edit = ref(false);
const active_detail = ref(false);
const back = () => {
  active_add.value = false;
  active_add2.value = false;
  active_edit.value = false;
  active_detail.value = false;
};

const see = () => {
  active_add2.value = true;
};
// 详情
const detailBtn = () => {
  active_detail.value = true;
};
const colGroup = ref([
  {
    type: "select",
    xxl: 6,
    xl: 5,
    label: "设备名称",
    key: "indexName", //formData里的key，最后传递给后台的参数
    placeholder: "请输入",
  },

  {
    type: "select",
    xxl: 6,
    xl: 5,
    label: "区域",
    key: "indexType",
    placeholder: "请选择",
    provinceData: [
      {
        dict_text: "基础性指标",
        dict_value: "BASICS",
      },
      {
        dict_text: "提高性指标",
        dict_value: "IMPROVEMENT",
      },
    ],
  },
  {
    type: "select",
    xxl: 6,
    xl: 5,
    label: "区域",
    key: "indexType",
    placeholder: "请选择",
    provinceData: [
      {
        dict_text: "基础性指标",
        dict_value: "BASICS",
      },
      {
        dict_text: "提高性指标",
        dict_value: "IMPROVEMENT",
      },
    ],
  },
  {
    type: "select",
    xxl: 6,
    xl: 5,
    label: "区域",
    key: "indexType",
    placeholder: "请选择",
    provinceData: [
      {
        dict_text: "基础性指标",
        dict_value: "BASICS",
      },
      {
        dict_text: "提高性指标",
        dict_value: "IMPROVEMENT",
      },
    ],
  },
  {
    type: "select",
    xxl: 6,
    xl: 5,
    label: "区域",
    key: "indexType",
    placeholder: "请选择",
    provinceData: [
      {
        dict_text: "基础性指标",
        dict_value: "BASICS",
      },
      {
        dict_text: "提高性指标",
        dict_value: "IMPROVEMENT",
      },
    ],
  },
  {
    type: "select",
    xxl: 6,
    xl: 6,
    label: "类型",
    key: "indexType",
    placeholder: "请选择",
    provinceData: [
      {
        dict_text: "基础性指标",
        dict_value: "BASICS",
      },
      {
        dict_text: "提高性指标",
        dict_value: "IMPROVEMENT",
      },
    ],
  },
  {
    type: "select",
    xxl: 6,
    xl: 6,
    label: "厂家",
    key: "indexType",
    placeholder: "请选择",
    provinceData: [
      {
        dict_text: "基础性指标",
        dict_value: "BASICS",
      },
      {
        dict_text: "提高性指标",
        dict_value: "IMPROVEMENT",
      },
    ],
  },
  {
    type: "select",
    xxl: 6,
    xl: 6,
    label: "设备来源",
    key: "indexType",
    placeholder: "请选择",
    provinceData: [
      {
        dict_text: "基础性指标",
        dict_value: "BASICS",
      },
      {
        dict_text: "提高性指标",
        dict_value: "IMPROVEMENT",
      },
    ],
  },
]);
const expand = ref(false);
const colMin = 3;
const count = computed(() => {
  return expand.value ? colGroup.value.length : colMin;
});
const btnSpan = ref({
  //按钮组宽度分配
  xxl: 6,
  xl: 8,
});
const colPush = ref(0); //右侧查询按钮组距离左侧偏移量
const widType = ref("xxl");
const searchMore = () => {
  if (!expand.value) {
    colGroup.value[0].xl = 6;
    colGroup.value[1].xl = 6;
    if (window.innerWidth > 1600 && window.innerWidth < 1900) {
      colGroup.value[0].xxl = 6;
      colGroup.value[1].xxl = 6;
    }
    let allWid = 0;
    for (let i = 0; i < colGroup.value.length; i++) {
      allWid = allWid + colGroup.value[i][widType.value];
    }

    colPush.value = 24 - btnSpan.value[widType.value] - (allWid % 24);
  } else {
    //收起

    colGroup.value[0].xl = 5;
    colGroup.value[1].xl = 5;
    if (window.innerWidth > 1600 && window.innerWidth < 1900) {
      colGroup.value[0].xxl = 5;
      colGroup.value[1].xxl = 5;
    }
    let allWid = 0;
    for (let i = 0; i < colMin; i++) {
      allWid = allWid + colGroup.value[i][widType.value];
    }

    colPush.value =
      allWid == 24
        ? 24 - btnSpan.value[widType.value]
        : 24 - btnSpan.value[widType.value] - allWid;
  }
  console.log(colPush.value);

  expand.value = !expand.value;
  nextTick(() => {
    calcHeight();
  });
  //
};

const formData = {
  TWOLevelId: "",
  ThreeLevelId: "",
  collectionMethod: [],
  indexCode: "",
  indexIsm: "",
  indexType: "",
  oneLevelId: "",
  indexName: "",
  applyTime: [],
};

const handleReset = () => {};
const handleQuery = () => {};
const handleNew = () => {
  active_add.value = true;
};
const edit = ref("false");
const handleNew1 = () => {
  active_edit.value = true;
  edit.value = true;
};
const online_pop = ref(false);
type Key = string | number;
let selectedRowKeys = ref<Key[]>([]);
const countAll = ref(0);
const tableScroll = ref({
  y: 0,
});
let selectedKeys: any = ref([]);
const tableData: any = ref([]);
const loading = ref(false);

const columns = computed(() => {
  const columns = [
    {
      title: "全选",
      dataIndex: "indexbox",
      width: 80,
    },
    {
      title: "唯一编码",
      dataIndex: "status",
    },
    {
      title: "设备名称",
      dataIndex: "name",
    },
    {
      title: "厂家",
      dataIndex: "age",
    },
    {
      title: "类型",
      dataIndex: "type",
    },
    {
      title: "区域",
      dataIndex: "address",
    },
    {
      title: "设备来源",
      dataIndex: "address",
    },
    {
      title: "操作",
      dataIndex: "operation",
      width: 180,
    },
  ];
  return columns;
});

let pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showTotal: () => {
    return `共${pagination.total}条数据`;
  },
});

const table_main = ref();
const header = ref();

const calcHeight = () => {
  tableScroll.value.y = getTableScroll() - 55;
  console.log(tableScroll.value.y);
};
const pageChange = (pageNumber: number, size: number) => {
  console.log(pageNumber, size);
  // pagination.current = pageNumber
  console.log(pagination);
  if (pagination.current != pageNumber) {
    pagination.pageSize = size;
    pagination.current = pageNumber;
    if (pageNumber == 2) {
      // 模拟表格分页数据
      tableData.value = [
        {
          key: 3,
          name: "王五",
          age: 35,
          address: "地址3",
          status: 2,
          type: 2,
        },
        {
          key: 4,
          name: "羊九",
          age: 67,
          address: "地址1",
          status: 3,
          type: 1,
        },
        {
          key: 5,
          name: "刘十一",
          age: 32,
          address: "地址1",
          status: 4,
          type: 1,
        },
        {
          key: 6,
          name: "邓八",
          age: 32,
          address: "地址4",
          status: 0,
          type: 1,
        },
        {
          key: 7,
          name: "赵六",
          age: 32,
          address: "地址1",
          status: 0,
          type: 2,
        },
        {
          key: 8,
          name: "田七",
          age: 23,
          address: "地址1",
          status: 1,
          type: 3,
        },
        {
          key: 9,
          name: "王五",
          age: 35,
          address: "地址3",
          status: 2,
          type: 2,
        },
        {
          key: 10,
          name: "羊九",
          age: 67,
          address: "地址1",
          status: 3,
          type: 1,
        },
      ];
    } else {
      tableData.value = [
        {
          key: 1,
          name: "张三",
          age: 32,
          address: "地址1",
          status: 0,
          type: 1,
        },
        {
          key: 2,
          name: "李四",
          age: 28,
          address: "地址2",
          status: 1,
          type: 1,
        },
        {
          key: 3,
          name: "王五",
          age: 35,
          address: "地址3",
          status: 2,
          type: 2,
        },
        {
          key: 4,
          name: "羊九",
          age: 67,
          address: "地址1",
          status: 3,
          type: 1,
        },
        {
          key: 5,
          name: "刘十一",
          age: 32,
          address: "地址1",
          status: 4,
          type: 1,
        },
        {
          key: 6,
          name: "邓八",
          age: 32,
          address: "地址4",
          status: 0,
          type: 2,
        },
        {
          key: 7,
          name: "赵六",
          age: 32,
          address: "地址1",
          status: 0,
          type: 3,
        },
        {
          key: 8,
          name: "田七",
          age: 23,
          address: "地址1",
          status: 1,
          type: 4,
        },
        {
          key: 9,
          name: "王五",
          age: 35,
          address: "地址3",
          status: 2,
          type: 2,
        },
        {
          key: 10,
          name: "羊九",
          age: 67,
          address: "地址1",
          status: 3,
          type: 1,
        },
      ];
    }
  }
  if (pagination.pageSize != size) {
    pagination.pageSize = size;
    pagination.current = 1;
    if (pagination.pageSize > 10) {
      tableData.value = [
        {
          key: 1,
          name: "张三",
          age: 32,
          address: "地址1",
          status: 0,
          type: 3,
        },
        {
          key: 2,
          name: "李四",
          age: 28,
          address: "地址2",
          status: 1,
          type: 1,
        },
        {
          key: 3,
          name: "王五",
          age: 35,
          address: "地址3",
          status: 2,
          type: 2,
        },
        {
          key: 4,
          name: "羊九",
          age: 67,
          address: "地址1",
          status: 3,
          type: 1,
        },
        {
          key: 5,
          name: "刘十一",
          age: 32,
          address: "地址1",
          status: 4,
          type: 1,
        },
        {
          key: 6,
          name: "邓八",
          age: 32,
          address: "地址4",
          status: 0,
          type: 4,
        },
        {
          key: 7,
          name: "赵六",
          age: 32,
          address: "地址1",
          status: 0,
          type: 5,
        },
        {
          key: 8,
          name: "田七",
          age: 23,
          address: "地址1",
          status: 1,
          type: 1,
        },
        {
          key: 9,
          name: "王五",
          age: 35,
          address: "地址3",
          status: 2,
          type: 2,
        },
        {
          key: 10,
          name: "羊九",
          age: 67,
          address: "地址1",
          status: 3,
          type: 1,
        },
        {
          key: 3,
          name: "王五",
          age: 35,
          address: "地址3",
          status: 2,
          type: 2,
        },
        {
          key: 4,
          name: "羊九",
          age: 67,
          address: "地址1",
          status: 3,
          type: 1,
        },
        {
          key: 5,
          name: "刘十一",
          age: 32,
          address: "地址1",
          status: 4,
          type: 1,
        },
        {
          key: 6,
          name: "邓八",
          age: 32,
          address: "地址4",
          status: 0,
          type: 2,
        },
        {
          key: 7,
          name: "赵六",
          age: 32,
          address: "地址1",
          status: 0,
          type: 2,
        },
        {
          key: 8,
          name: "田七",
          age: 23,
          address: "地址1",
          status: 1,
          type: 4,
        },
        {
          key: 9,
          name: "王五",
          age: 35,
          address: "地址3",
          status: 2,
          type: 2,
        },
        {
          key: 10,
          name: "羊九",
          age: 67,
          address: "地址1",
          status: 3,
          type: 1,
        },
      ];
    } else {
      tableData.value = [
        {
          key: 1,
          name: "张三",
          age: 32,
          address: "地址1",
          status: 0,
          type: 1,
        },
        {
          key: 2,
          name: "李四",
          age: 28,
          address: "地址2",
          status: 1,
          type: 1,
        },
        {
          key: 3,
          name: "王五",
          age: 35,
          address: "地址3",
          status: 2,
          type: 2,
        },
        {
          key: 4,
          name: "羊九",
          age: 67,
          address: "地址1",
          status: 3,
          type: 1,
        },
        {
          key: 5,
          name: "刘十一",
          age: 32,
          address: "地址1",
          status: 4,
          type: 1,
        },
        {
          key: 6,
          name: "邓八",
          age: 32,
          address: "地址4",
          status: 0,
          type: 2,
        },
        {
          key: 7,
          name: "赵六",
          age: 32,
          address: "地址1",
          status: 0,
          type: 3,
        },
        {
          key: 8,
          name: "田七",
          age: 23,
          address: "地址1",
          status: 1,
          type: 4,
        },
        {
          key: 9,
          name: "王五",
          age: 35,
          address: "地址3",
          status: 2,
          type: 2,
        },
        {
          key: 10,
          name: "羊九",
          age: 67,
          address: "地址1",
          status: 3,
          type: 1,
        },
      ];
    }
  }
  selectedRowKeys.value = [];
  // getList();
};
const getList = () => {
  tableData.value = [
    {
      key: 1,
      name: "张三",
      age: 32,
      address: "地址1",
      status: 0,
      type: 1,
    },
    {
      key: 2,
      name: "李四",
      age: 28,
      address: "地址2",
      status: 1,
      type: 2,
    },
    {
      key: 3,
      name: "王五",
      age: 35,
      address: "地址3",
      status: 2,
      type: 3,
    },
    {
      key: 4,
      name: "羊九",
      age: 67,
      address: "地址1",
      status: 3,
      type: 4,
    },
    {
      key: 5,
      name: "刘十一",
      age: 32,
      address: "地址1",
      status: 4,
      type: 5,
    },
    {
      key: 6,
      name: "邓八",
      age: 32,
      address: "地址4",
      status: 0,
      type: 1,
    },
    {
      key: 7,
      name: "赵六",
      age: 32,
      address: "地址1",
      status: 0,
      type: 2,
    },
    {
      key: 8,
      name: "田七",
      age: 23,
      address: "地址1",
      status: 1,
      type: 3,
    },
    {
      key: 9,
      name: "王五",
      age: 35,
      address: "地址3",
      status: 2,
      type: 2,
    },
    {
      key: 10,
      name: "羊九",
      age: 67,
      address: "地址1",
      status: 3,
      type: 1,
    },
  ];
  pagination.total = 18;
  countAll.value = 18;
};
//选择项改变
const onSelectChange = (selectedRowKeyss: Key[]) => {
  console.log(selectedRowKeyss, selectedRowKeys);
  selectedRowKeys.value = selectedRowKeyss;
};
const addUserPopup = ref(false);
const editPop = ref(false);
const userid = ref("");
const userName = ref("");
const visibleRes = ref(false);
const selectedname = ref("");
//批量删除
const handleBatchDel = () => {
  if (selectedRowKeys.value.length != 0) {
    let ids = selectedRowKeys.value.join(",");
    handleDel(ids);
  } else {
    message.info("请选择要删除的数据");
  }
};

const handleDel = (item: any) => {
  Modal.confirm({
    title: "提示",
    centered: true,
    content: "确定删除选中的数据么？",
    okText: "确定",
    cancelText: "取消",
    onOk: () => {
      //删除用户
    },
  });
};
const userOnlineClick = (item: any) => {
  userid.value = item.id;
  online_pop.value = true;
};
onMounted(() => {
  if (window.innerWidth <= 1600) {
    widType.value = "xl";
  }

  if (window.innerWidth > 1600 && window.innerWidth < 1900) {
    colGroup.value[0].xxl = 5;
    colGroup.value[1].xxl = 5;
    btnSpan.value.xxl = 8;
  }
  calcHeight();
  getList();
});
const onSelect = (val: any, e: any) => {
  console.log(val, e);
  selectedname.value = e.node.name;
};
const handleExport = (e: any) => {
  if (e.key == 1) {
    message.info("导出选中行");
  } else if (e.key == 2) {
    message.info("导出当前页");
  } else if (e.key == 3) {
    message.info("导出全部");
  }
};
</script>

<style lang="scss" scoped>
.layer {
  background-color: #f5f5f5;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.main-box {
  .content-main {
    background: #fff;
    border: 1px solid #dddddd;

    .table-operations {
      /* margin-bottom: 20px; */
      display: flex;
      justify-content: space-between;
      align-items: center;
      /* padding-bottom: 10px; */
      border-bottom: 1px solid rgba(221, 221, 221, 1);
      height: 52px;
      padding: 0px 15px;
      background-color: #fff;

      .left {
        display: flex;
        font-size: 16px;
        font-weight: bold;
        opacity: 0.85;
      }

      .right {
        display: flex;
        // opacity: 0.65;
        align-items: center;

        .table-tool {
          width: 200px;

          ::v-deep .ant-select {
            width: 100%;
          }
        }

        .btn {
          min-width: 88px;
          margin-left: 10px;
        }
      }
    }

    .table-main {
      .status-box {
        display: flex;
        align-items: center;

        span {
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          margin-right: 8px;
        }

        .ststus-green {
          background-color: rgba(82, 196, 26, 1);
        }

        .ststus-red {
          background-color: #f5222d;
        }

        .ststus-orange {
          background-color: #fa8c16;
        }

        .ststus-grey {
          background-color: rgba(0, 0, 0, 0.45);
        }

        .ststus-blue {
          background-color: #1677ff;
        }
      }

      .type-box {
        display: flex;
        align-items: center;

        .type-item {
          display: flex;
          min-width: 88px;
          height: 32px;
          line-height: 32px;
          justify-content: space-between;
          align-items: center;
          padding: 0px 5px;

          i {
            width: 22px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            color: #fff;
            border-radius: 4px;
          }

          span {
            display: inline-block;
            width: calc(100% - 22px);
            text-align: center;
          }
        }

        .type-green {
          background-color: #efffdf;
          color: #52c41a;

          i {
            background: #52c41a;
          }
        }

        .type-red {
          background-color: #fff1f0;
          color: #ff4d4f;

          i {
            background: #ff4d4f;
          }
        }

        .type-blue {
          background-color: #e6f4ff;
          color: #1677ff;

          i {
            background: #1677ff;
          }
        }

        .type-yellow {
          background-color: #fff6e3;
          color: #fa8c16;

          i {
            background: #fa8c16;
          }
        }

        .type-gray {
          background-color: #f5f5f5;
          color: rgba(0, 0, 0, 0.65);

          i {
            background: rgba(0, 0, 0, 0.65);
          }
        }
      }

      .table-row-btn {
        margin-bottom: 0;

        a {
          &:first-child {
            margin: 0;
          }

          /* width: 68px; */
          margin-left: 20px;
        }

        .a-btn-blue {
          color: #1677ff;

          .icon-xia {
            margin-left: 3px;
            font-size: 14px;
          }
        }

        .a-btn-orange {
          color: #fa8c16;
        }

        .a-btn-red {
          color: #f5222d;
        }

        .a-btn-green {
          color: rgba(82, 196, 26, 1);
        }

        .a-btn-disabled {
          cursor: not-allowed;
          color: rgba(0, 0, 0, 0.25);
        }
      }

      .rowspan-box {
        display: flex;
        align-items: center;

        .green-round {
          display: inline-block;
          margin-right: 5px;
          background: green;
          width: 5px;
          height: 5px;
          border-radius: 50%;
        }

        .grey-round {
          margin-right: 5px;
          display: inline-block;
          background: grey;
          width: 5px;
          height: 5px;
          border-radius: 50%;
        }
      }
    }
  }

  ::v-deep .ant-table-wrapper .ant-table-thead > tr > th,
  ::v-deep .ant-table-wrapper .ant-table-tbody > tr > td,
  ::v-deep .ant-table-wrapper tfoot > tr > th,
  ::v-deep .ant-table-wrapper tfoot > tr > td {
    padding: 8px 16px;
  }

  /* 表格行操作按钮 */
  ::v-deep input::placeholder {
    color: rgba(255, 255, 255, 1);
  }

  ::v-deep .ant-table-tbody tr:nth-child(2n) {
    background-color: #fafafa;
  }

  ::v-deep .ant-table-tbody > tr > td {
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd !important;
  }

  ::v-deep table > thead > tr > th {
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd !important;
  }
}

/* 覆盖原生分页样式 */
::v-deep .table-pager {
  border-top: 1px solid #dddddd;

  .ant-pagination {
    text-align: right;
    padding: 0 20px;
    line-height: 52px;

    .ant-pagination-options-quick-jumper {
      line-height: 52px;
      height: 52px;
    }
  }
}

::v-deep .ant-btn:hover {
  color: #1677ff;
  border-color: #1677ff;
}

::v-deep .ant-pagination-total-text {
  letter-spacing: 3px;
}

::v-deep .ant-pagination-item-active a {
  color: #fff;
}

::v-deep .ant-pagination-item-active {
  color: #fff;
  background: #1677ff;
  border: 1px solid #1677ff;
}

::v-deep .ant-pagination-item-active:hover a {
  color: #fff;
  background: #1677ff;
  border-color: #1677ff;
}

::v-deep .ant-dropdown-menu-item:hover {
  color: #1677ff;
  background: #e6f4ff;
}

/* 基础搜索表单表格开始 */
.main-box {
  width: 100%;
  height: 100%;

  .wrap {
    background-color: #f5f5f5;
    padding: 20px;
    // height: calc(100% - 52px);
    height: 100%;
    display: flex;
    flex-direction: column;

    .header,
    .content {
      background-color: #ffffff;
    }

    //头部
    .header {
      margin-bottom: 20px;
      border-radius: 4px;

      //搜索条件
      .header-search {
        position: relative;
        width: 100%;
        padding: 20px;
        padding-bottom: 0;
      }
    }

    & > .content {
      border-radius: 4px;
    }

    .content {
      flex: 1;

      .content-main {
        display: flex;
        flex-direction: column;
        height: 100%;
        border: 1px solid #dddddd;
      }
    }
  }

  //展开-收起 样式
  .btn-transparent {
    background: transparent;
    color: rgba(22, 119, 255, 1);
    cursor: pointer;
    border: none;
  }

  .content {
    padding: 20px;
  }

  //搜索表单
  .btn-box {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .btn-transparent {
      span {
        margin-right: 5px;
      }
    }

    button {
      &:first-child {
        margin-left: 0;
      }

      margin-left: 20px;
      white-space: nowrap;
    }
  }

  .ant-form-item {
    margin-bottom: 20px;
  }

  //表格头部操作按钮
  .table-operations {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dddddd;
    height: 52px;

    .left {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85);

      .font-num {
        font-weight: bold;
        color: rgba(22, 119, 255, 1);
      }
    }

    .right {
      color: rgba(0, 0, 0, 0.65);

      ::v-deep .ant-btn {
        span {
          line-height: 32px;
        }
      }

      .btn {
        margin-left: 15px;

        i {
          margin-right: 5px;
        }

        i:nth-of-type(2) {
          margin-left: 5px;
          margin-right: 0px;
        }
      }
    }
  }

  //表格内容部分
  .table-main {
    flex: 1;

    .table-striped td {
      background-color: #fafafa;
    }
  }

  //分页器
  .table-pager {
    border-top: 1px solid #dddddd;
    padding: 0 20px;
    height: 52px;
    line-height: 52px;
  }

  ::v-deep .ant-pagination {
    line-height: 52px;
    text-align: right;

    .ant-pagination-options-quick-jumper {
      line-height: 52px;
      height: 52px;
    }
  }

  //表格行操作按钮
  .table-row-btn {
    margin-bottom: 0;

    a {
      &:first-child {
        margin: 0;
      }

      // width: 68px;
      margin-left: 20px;
    }

    .a-btn-blue {
      color: rgba(22, 119, 255, 1);
    }

    .a-btn-orange {
      color: #fa8c16;
    }

    .a-btn-red {
      color: #f5222d;
    }

    .a-btn-green {
      color: rgba(82, 196, 26, 1);
    }

    .a-btn-disabled {
      cursor: not-allowed;
      color: rgba(0, 0, 0, 0.25);
    }
  }

  //表格边框优化
  ::v-deep .ant-select-selection {
    border-radius: 2px;
  }

  //表单搜索条件
  ::v-deep .ant-form-item {
    display: flex;

    .ant-form-item-control-wrapper {
      flex: 1;
    }
  }

  .form-mid {
    text-align: center;
    line-height: 32px;
  }
}
</style>
<style lang="scss">
.ant-popover-inner-content {
  padding: 5px !important;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
  border-radius: 4px;

  .pop-box {
    p {
      padding: 0px 20px;
      height: 32px;
      line-height: 32px;
      border-radius: 4px;
    }

    p:hover {
      color: #1677ff;
      background: #e6f4ff;
    }
  }
}
</style>
